<template>
  <el-dialog
    title="选择角色"
    :visible.sync="visibleDialog"
    width="600px"
    append-to-body
    class="promoter_person"
  >
    <div class="person_body clear">
      <div class="person_tree l">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色列表" name="1">
            <el-tree
              :data="roles"
              show-checkbox
              default-expand-all
              node-key="id"
              :load="loadNode"
              ref="tree"
              highlight-current
              :filter-node-method="filterNode"
              :props="defaultProps"
              @check="currentChecked"
            >
            </el-tree>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="has_selected l">
        <p class="clear">
          已选（{{ total }}）
          <a @click="delList">清空</a>
        </p>
        <ul>
          <li v-for="(item, index) in checkedRoleList" :key="index + 'e'">
            <img src="@/assets/images/icon_role.png" />
            <span>{{ item.name }}</span>
            <!-- <img
              src="@/assets/images/cancel.png"
              @click="$func.removeEle(checkedRoleList, item, 'roleId')"
            /> -->
          </li>
        </ul>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)">取 消</el-button>
      <el-button type="primary" @click="saveDialog">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import mixins from './mixins'
export default {
  mixins: [mixins],
  props: ['visible', 'data', 'parent'],
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    },
    visible (val) {
      this.visibleDialog = this.visible
      if (val) {
        this.getRoleList()
        this.searchVal = ''
        this.checkedRoleList = this.data.map(({ name, targetId }) => ({
          name: name,
          id: targetId
        }))
      }
    },
    visibleDialog (val) {
      this.$emit('update:visible', val)
    }
  },
  computed: {
    total () {
      return this.checkedRoleList.length
    }
  },
  data () {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      checkedRoleList: [],
      filterText: ''
    }
  },
  methods: {
    handleClick () {
      let parent = JSON.parse(JSON.stringify(this.parent))
      this.checkedRoleList = parent.map(item => ({
        name: item.name,
        id: item.targetId
      }))
      let namelist = []
      for (let i = 0; i < parent.length; i++) {
        namelist.push(parent[i].targetId)
      }
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(namelist)
      })
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    currentChecked (nodeObj, SelectedObj) {
      let SelectedList = SelectedObj.checkedNodes
      this.checkedRoleList = SelectedList.map(item => ({
        name: item.label,
        targetId: item.id
      }))
    },
    saveDialog () {
      let checkedList = this.checkedRoleList
      this.$emit('change', checkedList)
    },
    delList () {
      this.checkedRoleList = []
      this.$refs.tree.setCheckedKeys([])
    }
  }
}
</script>

<style scoped lang="scss">
.promoter_person {
  // width: 600px;
  .person_body {
    display: flex;
    border: 1px solid #f5f5f5;
    // height: 500px;
    .person_tree {
      padding: 10px 12px 0 8px;
      width: 280px;
      height: 100%;
      border-right: 1px solid #f5f5f5;
      input {
        padding-left: 25px;
        width: 210px;
        height: 30px;
        font-size: 12px;
        border-radius: 2px;
        border: 1px solid #d5dadf;
        background: url(~@/assets/images/list_search.png) no-repeat 10px center;
        background-size: 14px 14px;
        margin-bottom: 14px;
      }
      ul {
        height: 420px;
        overflow-y: auto;
        li {
          padding: 5px 0;
          a {
            font-size: 12px;
            position: relative;
            padding-left: 20px;
            margin-right: 30px;
            cursor: pointer;
            color: #333;
            white-space: pre;
          }
          i {
            float: right;
            padding-left: 24px;
            padding-right: 10px;
            color: #3195f8;
            font-size: 12px;
            cursor: pointer;
            background: url(~@/assets/images/next_level_active.png) no-repeat
              10px center;
            border-left: 1px solid rgb(238, 238, 238);
          }
        }
        li a.active + i {
          color: rgb(197, 197, 197);
          background-image: url(~@/assets/images/next_level.png);
          pointer-events: none;
        }
      }
      .tree_nav {
        span {
          display: inline-block;
          padding-right: 10px;
          margin-right: 5px;
          max-width: 6em;
          color: #38adff;
          font-size: 12px;
          cursor: pointer;
          background: url(~@/assets/images/jiaojiao.png) no-repeat right center;
        }
        span:last-of-type {
          background: none;
        }
      }

      img {
        width: 14px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
    .has_selected {
      width: 276px;
      height: 100%;
      font-size: 12px;
      p {
        padding-left: 19px;
        padding-right: 20px;
        line-height: 37px;
        border-bottom: 1px solid #f2f2f2;
        a {
          float: right;
          color: #3296fa;
        }
      }
      ul {
        height: 460px;
        li {
          margin: 11px 26px 13px 19px;
          line-height: 17px;
          span {
            vertical-align: middle;
          }

          img:first-of-type {
            width: 14px;
            vertical-align: middle;
            margin-right: 5px;
          }
          img:last-of-type {
            float: right;
            margin-top: 2px;
            width: 14px;
          }
        }
      }
    }
  }
}
</style>
